<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
   <!-- <title>企业管理软件 </title>-->
    <title>瑞吉外卖云端</title>
<!--    <link rel="shortcut icon " type="images/x-icon" href="./favicon.ico">-->
<!--    <link rel="shortcut icon" href="./favicon.ico">-->

    <link rel="icon" href="./wechat_640.gif" type="image/gif" />
<!--    <link rel="shortcut icon" href="./favicon.ico" mce_href="/favicon.ico" type="image/x-icon">-->
<!--    <link rel="shortcut icon" type="images/x-icon" href="https://hao.360.com/favicon.ico">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        function supportSVG() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
            //var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if (isIE || isIE11) {
                return false;
            } else {
                return true;//不是ie浏览器
            }
        }

        var isSupportSVG = supportSVG();
        if (!isSupportSVG) {
            document.documentElement.className += ' notSupportSVG';
        }
    </script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        /*整个内容区*/
        .container {
            position: relative;
            height: 75%;
            background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
        }

        .slide {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

        /*口号*/
        .slogan-container {
            position: absolute;
            left: 0;
            right: 0;
            top: 31%;
            text-align: center;
        }

        .slogan-container .caption {
            padding: 0;
            margin: 0;
            font-size: 100px;
            font-family: -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            'PingFang SC',
            'Hiragino Sans GB',
            'Microsoft YaHei',
            'Helvetica Neue',
            Helvetica,
            Arial,
            sans-serif;
            /* font-family:FZXiDengXian-Z06S; */
            font-weight: 400;
            color: #fff;
        }

        .slogan-container .subtitle {
            padding: 0;
            margin: 0;
            font-size: 40px;
            font-family: Microsoft YaHei;
            font-weight: normal;
            color: #fff;
            line-height: 58px;
            opacity: 0.85;
        }


        /*登录*/
        .login-container {
            margin-top: 60px;
            text-align: center;
        }

        .login-container .login-btn {
            width: 180px;
            height: 60px;
            font-size: 17px;
            color: #fff;
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            outline: none;
            border: none;
            cursor: pointer;
            margin: 0 25px;
            position: relative;
            -webkit-transition: all 0.7s ease;
            transition: all 0.7s ease;
        }

        .login-container .login-btn:hover {
            background: transparent;
        }

        .login-container .login-btn:hover:before,
        .login-container .login-btn:hover:after {
            -webkit-transition: all 0.7s ease;
            transition: all 0.7s ease;
            width: 100%;
        }

        .login-container .login-btn:before,
        .login-container .login-btn:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0px;
            width: 0px;
            height: 1px;
            background: #fff;
            transition: all 0.4s ease;
        }

        .login-container .login-btn:after {
            top: inherit;
            left: inherit;
            bottom: 0;
            right: 0;
        }

        .logo-container {
            position: absolute;
            top: 6%;
            left: 3.5%;
            width: 80px;
            height: 30px;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url('');
        }

        /*文字动画相关*/
        .dg {
            display: none;
        }

        #particle-slider {
            margin: 0 auto 70px;
            height: 160px;
        }

        /*波浪*/
        .waves-container {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .waves {
            position: relative;
            width: 100%;
            height: 18vh;
            margin-bottom: -7px;
            min-height: 100px;
            max-height: 150px;
        }

        /*svg内部波浪动画*/
        .parallax > use {
            animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
        }

        .parallax > use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
        }

        .parallax > use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
        }

        .parallax > use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
        }

        .parallax > use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
        }

        @keyframes move-forever {
            0% {
                transform: translate3d(-90px, 0, 0);
            }

            100% {
                transform: translate3d(85px, 0, 0);
            }
        }

        @media screen and (min-width: 1600px) {
            .logo-container {
                width: 126px;
                height: 47px;
            }

            #particle-slider {
                height: 200px;
            }
        }

        @media screen and (max-height: 1100px) {
            .container {
                height: 90%;
            }

            .slogan-container {
                top: 24%;
            }

            #particle-slider .draw {
                margin: 0 auto;
                height: 240px;
            }

            .login-container {
                margin: 20 auto 0;
            }
        }

        @media screen and (max-height: 800px) {
            .slogan-container {
                top: 24%;
            }

            .login-container {
                margin: 0 auto;
            }
        }


        @keyframes move_wave {
            0% {
                transform: translateX(0) translateZ(0) scaleY(1)
            }

            50% {
                transform: translateX(-25%) translateZ(0) scaleY(0.55)
            }

            100% {
                transform: translateX(-50%) translateZ(0) scaleY(1)
            }
        }

        .waveWrapper {
            display: none;
            overflow: hidden;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            top: auto;
            height: 160px;
        }

        .notSupportSVG .waveWrapper {
            display: block;
        }

        .notSupportSVG .waves {
            display: none;
        }

        .waveWrapperInner {
            position: absolute;
            width: 100%;
            overflow: hidden;
            bottom: -1px;
            height: 160px;
        }

        .waveWrapper .bgTop {
            z-index: 15;
            opacity: 0.35;
        }

        .waveWrapper .bgMiddle {
            z-index: 10;
            opacity: 0.5;
        }

        .waveWrapper .bgBottom {
            z-index: 5;
            opacity: 1;
        }

        .waveWrapper .csswave {
            position: absolute;
            left: 0;
            width: 200%;
            height: 100%;
            background-repeat: repeat no-repeat;
            background-position: 0 bottom;
            transform-origin: center bottom;
            background-image: url('/platform/runtime/sys/web/assets/img/wave-top.png');
            background-size: 50% 120px;
        }


        .waveAnimation .waveTop {
            animation: move_wave 20s linear infinite;
        }

        .waveWrapper .waveMiddle {
            width: 300%;
        }

        .waveAnimation .waveMiddle {
            animation: move_wave 12s linear infinite;
        }

        .waveWrapper .waveBottom {
            width: 300%;
            background-size: 50% 90px;
        }

        .waveAnimation .waveBottom {
            animation: move_wave 15s cubic-bezier(.36, .45, .63, .53) infinite;
        }
    </style>

</head>

<body>

<div class="container">

    <div class="slogan-container">
        <h5 class="caption">
            <span>Derive cloud</span>
            <span>Focus cloud</span>
        </h5>
        <!--<h2 class="subtitle">Born in the cloud</h2>-->
        <!-- <div id="particle-slider" class="slide"
             style="background-image:url('')">

         </div>-->
        <div class="login-container">
            <button type="button" class="login-btn" onclick="window.location.href='/backend/page/login/login.html';">
                登录
            </button>
        </div>
    </div>


    <!--波浪开始-->
    <div class="waves-container">
        <div id="svgWaveWrapper">
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                    <path id="gentle-wave"
                          d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"/>
                    <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
                    <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
                    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
                </g>
            </svg>
        </div>
        <div id="cssWaveWrapper" class="waveWrapper waveAnimation">
            <div class="waveWrapperInner bgTop">
                <div class="csswave waveTop"></div>
            </div>
            <div class="waveWrapperInner bgMiddle">
                <div class="csswave waveMiddle"></div>
            </div>
            <div class="waveWrapperInner bgBottom">
                <div class="csswave waveBottom"></div>
            </div>
        </div>
    </div>
    <!--波浪结束-->
</div>
<script type="text/javascript">
    if (isSupportSVG) {
        var cssWaveDom = document.getElementById('cssWaveWrapper');
        cssWaveDom.parentNode.removeChild(cssWaveDom);
    } else {
        var svgWaveDom = document.getElementById('svgWaveWrapper');
        svgWaveDom.parentNode.removeChild(svgWaveDom);
    }
</script>
</body>

</html>
